<template>
  <div class="app-container">

    <el-row>
      <el-col :span="12">
        <h3>{{ form.id ? "编辑课程分类":"添加课程分类" }}</h3>
        <el-form
          :model="form"
          ref="formRef"
          :rules="formRules"
          label-width="150px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="课程分类标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number :min="0" v-model="form.sort"></el-input-number>
          </el-form-item>
          <el-form-item label="上级分类" prop="parentId">
            <el-select v-model="form.parentId">
              <el-option label="-请选择-" value="" />
              <el-option
                v-for="item in parentSubjectList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import subjectApi from "@/api/subject";
export default {
  data() {
    return {
      parentSubjectList: [],
      form: {
        id: null,
        parentId: null,
        sort: 0,
        title: null,
      },

      formRules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        parentId: [
          { required: true, message: "上级分类不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getOneSubjectList();
    this.initSubject();
  },
  watch: {
    $route(to, from) {
      this.initSubject()
    }
  },
  methods: {
    // 初始化
    initSubject() {
      if (this.$route.query.id) {
        this.form.id = this.$route.query.id;
        this.getSubjects()
      }else {
        this.form = {}
      }
    },
    // 获取一级分类列表
    async getOneSubjectList() {
      let res = await subjectApi.getOneSubject();
      console.log(res);
      let obj = {
        id: "0",
        title: "无上级分类",
      };
      if (res.success) {
        let arr = res.data.list;
        arr.unshift(obj);
        this.parentSubjectList = arr;
        console.log(this.parentSubjectList);
      }
    },
    handleSave() {
      this.$refs.formRef.validate((v) => {
        if (v) {
          if(this.form.id){
            this.handleEdit()
          }else{
            this.handleAdd();
          }
        }
      });
    },
    async handleAdd() {
      let res = await subjectApi.addSubject(this.form);
      if (res.success) {
        this.$message.success("添加课程分类成功");
        this.$router.push("/subject/list");
      } else {
        this.$message.error(res.msg);
      }
    },
    async handleEdit() {
      let res = await subjectApi.updateSubject(this.form);
      if (res.success) {
        this.$message.success("修改课程分类成功");
        this.$router.push("/subject/list");
      } else {
        this.$message.error(res.msg);
      }
    },
    async getSubjects() {
      if (this.form.id) {
        let res = await subjectApi.getSubject(this.form.id);
        if (res.success) {
          this.form = res.data.subject;
        } else {
          return this.$message.error(res.msg);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>